<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2310班随机抽选</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            max-width: 600px;
            margin: auto;
        }
        .result {
            margin-top: 20px;
            font-size: 1.2em;
            font-weight: bold;
        }
        .history {
            margin-top: 20px;
            font-size: 1em;
        }
        .history-item {
            margin-bottom: 10px;
        }
        .alert {
            color: red;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>2310班随机抽选</h1>
        <div>
            <label for="numSelect">选择抽取人数：</label>
            <select id="numSelect">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
            </select>
        </div>
        <div>
            <label for="genderSelect">选择抽取性别：</label>
            <select id="genderSelect">
                <option value="all">全部</option>
                <option value="女">女</option>
                <option value="男">男</option>
            </select>
        </div>
        <div>
            <label for="uniqueSelect">是否不再抽取已选学生：</label>
            <input type="checkbox" id="uniqueSelect">
        </div>
        <button id="drawButton">抽取</button>
        <button id="resetButton">重置记录</button>
        <div class="result" id="result"></div>
        <div class="alert" id="alert"></div>
        <div class="history" id="history">
            <h3>历史记录：</h3>
        </div>
    </div>

    <script>
        const students = {
            女: [
                "商淑澜", "游富媛", "王子木", "汪金瑶", "李奕萱", "周宇瑶", "杨欣逸", "成相澳", "郑于彤", "冯紫涵", "余梦佳", "李雨馨", "张笑语", "肖家琪", "吴雨桐", "高安琪", "代江柠", "王子辰", "龙雅莉", "覃静悦", "夏婉钦", "宋逸灵"
            ],
            男: [
                "彭金喆", "闵凡哲", "陈枭垚", "黄天承", "向鑫杰", "宋珺涵", "杨嘉维", "陈建洋", "揭博岩", "冷世彬", "熊蓝鑫", "杨皓宇", "杨炎鑫", "胡骐扬", "杨灏宸", "陈开来", "柳子笠", "汪锦文", "王懿杰", "马奥霖", "孙镱珏", "鲁昱彤", "罗天言", "罗奥", "胡锌原", "徐鹏勋", "王昱杰"
            ]
        };

        const numSelect = document.getElementById('numSelect');
        const genderSelect = document.getElementById('genderSelect');
        const uniqueSelect = document.getElementById('uniqueSelect');
        const drawButton = document.getElementById('drawButton');
        const resetButton = document.getElementById('resetButton');
        const resultDiv = document.getElementById('result');
        const alertDiv = document.getElementById('alert');
        const historyDiv = document.getElementById('history');

        let selectedStudents = [];
        let historyList = [];

        drawButton.addEventListener('click', () => {
            const numToSelect = parseInt(numSelect.value);
            const gender = genderSelect.value;
            const unique = uniqueSelect.checked;

            let pool = [];
            if (gender === 'all') {
                pool = students.女.concat(students.男);
            } else {
                pool = students[gender];
            }

            if (unique) {
                pool = pool.filter(student => !selectedStudents.includes(student));
            }

            if (pool.length < numToSelect) {
                alertDiv.textContent = `剩余学生不足，无法抽取指定人数。剩余可抽取学生人数：${pool.length}。`;
                resultDiv.textContent = '';
                return;
            }

            alertDiv.textContent = '';
            const selected = [];
            for (let i = 0; i < numToSelect; i++) {
                const randomIndex = Math.floor(Math.random() * pool.length);
                selected.push(pool[randomIndex]);
                if (unique) {
                    selectedStudents.push(pool[randomIndex]);
                    pool.splice(randomIndex, 1);
                }
            }

            resultDiv.textContent = selected.join(', ');
            historyList.push(selected.join(', '));
            updateHistory();
        });

        resetButton.addEventListener('click', () => {
            selectedStudents = [];
            historyList = [];
            resultDiv.textContent = '';
            alertDiv.textContent = '';
            historyDiv.innerHTML = '<h3>历史记录：</h3>';
        });

        function updateHistory() {
            historyDiv.innerHTML = '<h3>历史记录：</h3>';
            historyList.forEach((item, index) => {
                const historyItem = document.createElement('div');
                historyItem.classList.add('history-item');
                historyItem.textContent = `${index + 1}. ${item}`;
                historyDiv.appendChild(historyItem);
            });
        }
    </script>
</body>
</html>